<mat-list *ngIf="editMode">
  <h3 mat-subheader>
    <mat-form-field>
      <input matInput [(ngModel)]="caseName">
    </mat-form-field>
    <div class="fill-remaining-space"></div>
    <button mat-icon-button type="button" (click)="toggleEditMode()">
      <mat-icon>done</mat-icon>
    </button>
  </h3>
  <mat-list-item *ngFor="let case of cases; let i = index" (click)="editItem(case)">
    <a mat-line>{{case.name}}</a>
    <div class="fill-remaining-space"></div>
    <button mat-icon-button (click)="deleteCase(i)">
      <mat-icon>delete</mat-icon>
    </button>
  </mat-list-item>
</mat-list>
<mat-nav-list *ngIf="!editMode">
  <h3 mat-subheader>
    {{caseName}}
    <div class="fill-remaining-space"></div>
    <button mat-icon-button type="button" (click)="addCase()">
      <mat-icon>add</mat-icon>
    </button>
    <button mat-icon-button type="button" (click)="toggleEditMode()">
      <mat-icon>edit</mat-icon>
    </button>
  </h3>
  <mat-list-item *ngFor="let case of cases; let i = index" [class.selected-case]="case.name === selectedCase" (click)="clickItem(case)">
    <a mat-line>{{case.name}}</a>
  </mat-list-item>
</mat-nav-list>
